<template>
  <div class="content_list">
    <ul class="list_outer">
      <li v-for="(item, index) in tabList" :key="index" :class="['list_one', {'active':active === index }]" @click="changeTab(item.name, index)">{{ item.label }}</li>
    </ul>
    <component :is="activeTab" :active="activeTab" style="flex: 1;" />
  </div>
</template>
<script>
import glory from './gloryList.vue';
export default {
  components: { glory },
  data () {
    return {
      active: 0,
      activeTab: 'glory',
      tabList: [
        {
          label: '个人荣耀',
          name: 'glory',
          productStatus: '',
          component: glory
        }
      ]
    };
  },
  created() {},
  methods: {
    changeTab() {}
  }
};
</script>

<style lang="scss" scoped>
.content_list {
  width: 1200px;
  min-height: 600px;
  margin: 0 auto;
  padding: 39px 10px 0px 10px;
  background: #ffffff;
  border-radius: 0px 0px 8px 8px;
  box-shadow: 0px 20px 80px 0px rgba(0,0,0,0.10);
  display: flex;
}
.list_outer {
  width: 180px;
  line-height: 48px;
}
.list_one {
  width: 100%;
  height: 48px;
  font-size: 16px;
  cursor: pointer;
  padding-left: 24px;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  color: #353434;
  text-align: left;
}
.active {
  color: #fff;
  background: #31456c;
  border-radius: 4px;
}
.list_one:hover {
  color: #fff;
  background: #31456c;
  border-radius: 4px;
}
</style>
